import React, { useState, useCallback, useLayoutEffect, useEffect, FC, PropsWithChildren } from 'react';
import { View, ScrollView } from '@tarojs/components';
import { observer } from 'mobx-react';
import Taro, { useDidShow } from '@tarojs/taro';
import { GStyleSheet } from '@/utils/DarkMode';

const dstyle = GStyleSheet.create({
  container: {
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    boxSizing: 'border-box',
    flex: 1,
    overflow: 'hidden',
    height: '100%',
  },
  list: {
    boxSizing: 'border-box',
    paddingTop: 10,
    paddingBottom: 10,
  },
});

interface IProps extends PropsWithChildren {
  id: string;
  style?: React.CSSProperties;
  scrollStyle?: React.CSSProperties;
  onScrollToLower?: () => void;
}

const FlexScrollView: FC<IProps> = ({ id, style, scrollStyle, children, onScrollToLower }) => {
  const styles = dstyle.useDynamicStyle();
  // const [listReact, setListReact] = useState({ width: 0, height: 0 });
  // const updateListHeight = useCallback(() => {
  //   setTimeout(() => {
  //     Taro.createSelectorQuery().select(`#${id}`).boundingClientRect(rec => {
  //       // console.log('FlexScrollView rec', rec, listReact)
  //       if (!listReact) {
  //         setListReact({ width: rec.width, height: rec.height })
  //       } else if (rec && (listReact!.height !== rec.height || listReact!.width !== rec.width)) {
  //         setListReact({ width: rec.width, height: rec.height })
  //       }
  //     }).exec()
  //   }, 300);
  // }, [listReact, id])

  // useDidShow(() => {
  //   if (!listReact || listReact.height < 1) {
  //     updateListHeight()
  //   }
  // })

  // useEffect(() => {
  //   if (!listReact || listReact.height < 1) {
  //     updateListHeight()
  //   }
  // }, [])

  // useLayoutEffect(() => {
  //   // console.log('useLayoutEffect')
  //   updateListHeight()
  // }, [updateListHeight])

  return (
    <View style={styles.container}>
      <View style={{ ...style, boxSizing: 'border-box', height: '100%' }} id={id}>
        <ScrollView
          className='listFlex'
          style={{
            ...styles.list,
            ...scrollStyle,
            // ...listReact
          }}
          scrollY
          onScrollToLower={onScrollToLower}>
          {children}
        </ScrollView>
      </View>
    </View>
  );
};

export default FlexScrollView;
